<template>
  <div :class="className" :reportData="reportData" :id="id" :style="{height:height,width:width}"></div>
</template>

<script>
  import echarts from 'echarts'

  var labelOption = {
    normal: {
      show: true,
      position: "insideBottom",
      distance: 15,
      align: "left",
      verticalAlign: "middle",
      rotate: 90,
      formatter: '{c}  {name|{a}}',
      fontSize: 16,
      rich: {
        name: {
          textBorderColor: '#fff'
        }
      }
    }
  };

  var dataZoomData = {
    bottom:0,
    start: 0,
    end: 50,
  }

  var lineObj = {
      name:'',
      type:'line',
      yAxisIndex: 1,
      data:[]
    }

  var barObj = {
      name: '',
      type: 'bar',
      barGap: 0,
      label: labelOption,
      yAxisIndex: 0,
      data: []
    }

  var tooltipFormatter

  export default {
    props: {
      reportData:{
        type:Object,
        default:null,
      },
      className: {
        type: String,
        default: 'chart'
      },
      id: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '200px'
      },
      height: {
        type: String,
        default: '400px'
      }
    },
    data() {
      var that = this;
      tooltipFormatter = function (params, ticket, callback) {
        if (that.reportData == null) {
          return;
        }
        var res = params[0].name;
        for (var i = 0, l = params.length; i < l; i++) {
          var septor = "";
          var isBar = params[i].seriesType == 'bar';

          isBar ? septor = " / 次" : septor = " / %";

          res += '<br/><span style="width:9px;height:'+ (isBar ? '9' : '2') +'px;display:inline-block;margin-right:5px;'+ (isBar ? 'border-radius:50%' : '') +';background-color:' + params[i].color + '">' +
            '</span>' + params[i].seriesName + ' : ' + params[i].value + septor
        }
        return res;
      }
      return {
        chart: null,
        options:{
          color:["#4a90e2","#a8d648" , "#58c5e6", "#db7820", "#516a92", "#edb0dc", "#f5cb8b", "#f5a623", "#7a64b0", "#f2ec3b"],
          legend: {
            data:[]
          },
          dataZoom: [],
          tooltip: {
            trigger: 'axis', //默认是折、柱类型  饼状为 item
            formatter: ''
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis : [
            {
              type : 'category',
              boundaryGap : true,
              data : []
            }
          ],
          yAxis : [
            {
              type: 'value',
              name: "数量",
              axisLine: {show: false},
              axisTick: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  color: "#aaa"
                }
              }
            },
            {
              type: 'value',
              name: "比率",
              axisLine: {show: false},
              axisTick: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  color: "#eee"
                }
              }
            }
          ],
          series : []
        }
      }
    },
    watch:{
      'reportData':{
        handler:function(val,oldVal){   //官方文档： 这里不能用箭头函数
          this.chart.clear();
          this.refresh();
        },
        deep:true
      }
    },
    mounted() {
      this.initChart()
    },
    methods: {
      getReportOptions(){
        let tempOptions = JSON.parse(JSON.stringify(this.options))
        let tempDataZoom = JSON.parse(JSON.stringify(dataZoomData));
        this.reportData.report.forEach((v,i)=>{
          let temp = v;
          let tempName = temp['name'];
          let count = temp['count'];
          let ratio = temp['ratio'];
          let tempBarObj = JSON.parse(JSON.stringify(barObj));
          let tempLineObj = JSON.parse(JSON.stringify(lineObj));
          tempOptions.legend.data.push(tempName);
          tempBarObj.name = tempName;
          tempBarObj.data = count;
          tempLineObj.name = tempName;
          tempLineObj.data = ratio.map(v=>{ return (v*100).toFixed(2)});
          tempOptions.series.push(tempBarObj);
          tempOptions.series.push(tempLineObj);
        })

        tempOptions.xAxis[0].data = this.reportData.time;
        tempOptions.tooltip.formatter = tooltipFormatter;
        let timeLength = this.reportData.time.length;
        if(timeLength >= 10){
          let endNum = timeLength >= 20 ? 33.3 : 50;
          tempDataZoom.end = endNum;
          tempOptions.dataZoom.push(tempDataZoom);
        }
        return tempOptions;
      },
      initChart() {
        this.chart = echarts.init(document.getElementById(this.id))
          window.chart = this.chart
        this.chart.setOption(this.options);
      },
      refresh(){
        this.chart.setOption(this.getReportOptions());
      }
    }
  }
</script>
